<template>
  <div class="wrap__circle" ref="wrap" :style="style__wrap">
    <svg :width="width" :height="height" :viewbox="viewbox" >
      <circle :cx="width/2" :cy="width/2" :r="radius" :stroke-width="strokeWidth" :stroke="backgroundCircleColor" fill="none" :stroke-dasharray="backgroundStrokeDasharray"></circle>
      <circle ref="circle" :cx="width/2" :cy="width/2" :r="radius" :stroke-width="strokeWidth" :stroke="circleColor" fill="none"  :stroke-dasharray="strokeDasharray"></circle>
    </svg>
  </div>
</template>
<script>
export default {
  name: 'Circle',
  props: {
    percent: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 120
    },
    height: {
      type: Number,
      default: 120
    },
    strokeWidth: {
      type: Number,
      default: 3
    },
    // TODO 添加颜色验证规则
    // 背景圆环颜色
    backgroundCircleColor: {
      default: '#b38d60'
    },
    // 进度条颜色
    circleColor: {
      default: '#fbf8f9'
    },
    backgroundLength: {
    }
  },

  computed: {
    style__wrap () {
      return `width:${this.width}; height:${this.height}`
    },
    viewbox () {
      return `0 0 ${this.width} ${this.height}`
    },
    radius () {
      return this.width / 2 - this.strokeWidth
    },

    backgroundStrokeDasharray () {
      let perimeter = Math.PI * 2 * this.radius
      let percent = 3 / 4
      return `${perimeter * percent} ${perimeter * (1 - percent)}`
    },
    strokeDasharray () {
      let perimeter = Math.PI * 2 * this.radius
      let percent = this.percent / 100 * 3 / 4
      return `${perimeter * percent} ${perimeter * (1 - percent)}`
    }
  },
  mounted () {
  },
  watch: {
  }
}
</script>
<style lang="stylus">
.wrap__circle {
  position: relative;
  transform:rotateZ(-225deg)
  svg>circle:nth-child(2) {
    -webkit-transition: stroke-dasharray .25s;
    transition: stroke-dasharray .25s;
  }
}
</style>
